<template>
  <div
    class="timeline-container"
    :style="{ width: timeLineContainer_width + 'px' }"
  >
    <!-- 顶部操作区域 -->
    <section class="top-operation-area">
      <div>
        <div class="top-button-left">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="8.234"
            height="8.234"
            viewBox="0 0 8.234 8.234"
          >
            <path
              id="路径_1555"
              data-name="路径 1555"
              d="M129.175,132.449l1.213,1.137c.178.18.361.471.183.651a.4.4,0,0,1-.6,0l-1.859-1.882a.363.363,0,0,1-.01-.512l1.869-1.911a.4.4,0,0,1,.6,0c.178.18-.005.471-.183.651l-1.2,1.181h4.084a3.045,3.045,0,0,1,2.963,3.064,3.172,3.172,0,0,1-2.963,3.2h-4.355c-.25,0-.46-.116-.46-.366s.21-.32.46-.32h4.319a2.8,2.8,0,0,0,2.313-2.518,2.648,2.648,0,0,0-2.313-2.377h-4.063Z"
              transform="translate(-128.003 -129.796)"
              fill="#fff"
            />
          </svg>
        </div>

        <div class="top-button-left">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="8.234"
            height="8.234"
            viewBox="0 0 8.234 8.234"
          >
            <path
              id="路径_1556"
              data-name="路径 1556"
              d="M7.063,2.653,5.849,3.79a1.248,1.248,0,0,0-.129.152.814.814,0,0,0-.1.173.386.386,0,0,0-.03.173.242.242,0,0,0,.071.152.474.474,0,0,0,.144.1.377.377,0,0,0,.311,0,.473.473,0,0,0,.144-.1L8.123,2.558a.385.385,0,0,0,.081-.12.373.373,0,0,0,.03-.136.353.353,0,0,0-.023-.136.345.345,0,0,0-.078-.12L6.265.135a.473.473,0,0,0-.144-.1.377.377,0,0,0-.311,0,.473.473,0,0,0-.144.1.242.242,0,0,0-.071.152.386.386,0,0,0,.03.173.814.814,0,0,0,.1.173,1.246,1.246,0,0,0,.129.152l1.2,1.181H2.963a2.815,2.815,0,0,0-1.156.248,3.005,3.005,0,0,0-.942.669,3.148,3.148,0,0,0-.633.976A3.08,3.08,0,0,0,0,5.03,3.244,3.244,0,0,0,.232,6.222,3.429,3.429,0,0,0,.865,7.247a3.085,3.085,0,0,0,.942.717,2.635,2.635,0,0,0,1.156.27H7.318A.684.684,0,0,0,7.5,8.212a.45.45,0,0,0,.146-.067.32.32,0,0,0,.1-.114.352.352,0,0,0,.037-.163.311.311,0,0,0-.037-.155.264.264,0,0,0-.1-.1A.463.463,0,0,0,7.5,7.563a.952.952,0,0,0-.177-.015H3a1.712,1.712,0,0,1-.826-.239A2.954,2.954,0,0,1,1.43,6.7a3.266,3.266,0,0,1-.537-.814A2.108,2.108,0,0,1,.686,5.03,1.965,1.965,0,0,1,.893,4.2a2.943,2.943,0,0,1,.537-.766,2.846,2.846,0,0,1,.743-.56A1.835,1.835,0,0,1,3,2.653H7.063Z"
              fill="#fff"
            />
          </svg>
        </div>

        <div class="top-button-left">
          <svg
            id="组_2943"
            data-name="组 2943"
            xmlns="http://www.w3.org/2000/svg"
            width="7.6"
            height="8.235"
            viewBox="0 0 7.6 8.235"
          >
            <rect
              id="矩形_2307"
              data-name="矩形 2307"
              width="1"
              height="8.235"
              transform="translate(1.8)"
              fill="#fff"
            />
            <rect
              id="矩形_2308"
              data-name="矩形 2308"
              width="1"
              height="8.235"
              transform="translate(4.8)"
              fill="#fff"
            />
            <rect
              id="矩形_2309"
              data-name="矩形 2309"
              width="2.8"
              height="1.2"
              fill="#fff"
            />
            <rect
              id="矩形_2310"
              data-name="矩形 2310"
              width="2.8"
              height="1.2"
              transform="translate(4.8)"
              fill="#fff"
            />
            <rect
              id="矩形_2311"
              data-name="矩形 2311"
              width="2.8"
              height="1.2"
              transform="translate(4.8 7.034)"
              fill="#fff"
            />
            <rect
              id="矩形_2312"
              data-name="矩形 2312"
              width="2.8"
              height="1.2"
              transform="translate(0 7.034)"
              fill="#fff"
            />
          </svg>
        </div>

        <div class="top-button-left">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="8.74"
            height="9.712"
            viewBox="0 0 8.74 9.712"
          >
            <path
              id="路径_1557"
              data-name="路径 1557"
              d="M128.85,87.276h-.486a.364.364,0,0,1,0-.728h8.012a.364.364,0,0,1,0,.728h-6.8V93.71a.607.607,0,0,0,.607.607h4.37a.607.607,0,0,0,.607-.607V88.368a.364.364,0,1,1,.728,0V93.71a1.335,1.335,0,0,1-1.335,1.335h-4.37a1.335,1.335,0,0,1-1.335-1.335Zm2.549-1.214a.364.364,0,0,1,0-.728h1.942a.364.364,0,1,1,0,.728Zm-.364,3.278a.364.364,0,1,1,.728,0v2.913a.364.364,0,1,1-.728,0Zm1.942,0a.364.364,0,0,1,.728,0v2.913a.364.364,0,0,1-.728,0Z"
              transform="translate(-128 -85.333)"
              fill="#fff"
            />
          </svg>
        </div>
      </div>

      <div>
        <!-- 放大时间轴 -->
        <div
          class="top-button-right"
          @click="clickZoomIn"
          :style="{
            pointerEvents:
              maxFrameOfMaterial === 0 || frameWidth === maxFrameWidth
                ? 'none'
                : 'auto',
            opacity:
              maxFrameOfMaterial === 0 || frameWidth === maxFrameWidth
                ? 0.2
                : 1,
          }"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10.553"
            height="10.524"
            viewBox="0 0 10.553 10.524"
          >
            <path
              id="路径_1558"
              data-name="路径 1558"
              d="M137.633,135.634H133.27v-4.38a.44.44,0,1,0-.88,0v4.377l-4.431,0h0a.44.44,0,0,0,0,.88l4.434,0V140.9a.44.44,0,1,0,.88,0v-4.384h4.361a.44.44,0,0,0,0-.88Z"
              transform="translate(-127.518 -130.816)"
              fill="#fff"
            />
          </svg>
        </div>

        <!-- 缩小时间轴 -->
        <div
          class="top-button-right"
          @click="clickZoomOut"
          :style="{
            pointerEvents:
              maxFrameOfMaterial === 0 || frameWidth === minFrameWidth
                ? 'none'
                : 'auto',
            opacity:
              maxFrameOfMaterial === 0 || frameWidth === minFrameWidth
                ? 0.2
                : 1,
          }"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10.553"
            height="0.885"
            viewBox="0 0 10.553 0.885"
          >
            <path
              id="路径_1559"
              data-name="路径 1559"
              d="M137.633,135.634H133.27v-.006c.008.008-.2.006-.44.006l-.44-.006v0l-4.431,0h0a.44.44,0,0,0,0,.88l4.434,0v0c.019,0,.2,0,.44,0s.464.006.44,0v.006h4.361a.44.44,0,0,0,0-.88Z"
              transform="translate(-127.518 -135.63)"
              fill="#fff"
            />
          </svg>
        </div>

        <!-- 合适的时间轴 -->
        <div
          class="top-button-right"
          @click="clickZoomFit"
          :style="{
            pointerEvents: maxFrameOfMaterial === 0 ? 'none' : 'auto',
            opacity: maxFrameOfMaterial === 0 ? 0.5 : 1,
          }"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="10.583"
            height="10.524"
            viewBox="0 0 10.583 10.524"
          >
            <path
              id="路径_1560"
              data-name="路径 1560"
              d="M5.217,6.019c0-.288-.229-.4-.506-.4H.756a.409.409,0,1,0,0,.817H3.83L.443,9.814A.391.391,0,0,0,1,10.367l3.412-3.4v3.111a.41.41,0,1,0,.82,0V6.019m5.256-2.005H7.41L10.8.639a.391.391,0,1,0-.555-.553l-3.4,3.4V.375a.41.41,0,1,0-.82,0V4.41c0,.012.012.012.012.024a.429.429,0,0,0,.109.288.364.364,0,0,0,.374.1h3.954a.406.406,0,0,0,.41-.408.4.4,0,0,0-.4-.4Z"
              transform="translate(-0.329 0.035)"
              fill="#fff"
            />
          </svg>
        </div>
      </div>
    </section>

    <section
      style="
        width: 100%;
        height: calc(100% - 31px);
        display: flex;
        flex-direction: row;
      "
    >
      <!-- 左部操作区域 -->
      <div class="left-operation-area" :style="{ width: '37px' }"></div>

      <!-- 时间轴 -->
      <div
        class="timeline"
        :style="{ width: timeLine_width + 'px' }"
        ref="timeLine"
      >
        <!-- 时间轴刻度 -->
        <div class="timescale" :style="{ width: timescale_width + 'px' }">
          <!-- 宽度占位 -->
          <div
            style="flex-shrink: 0"
            :style="{ width: timescale_placeholder_width + 'px' }"
          ></div>

          <!-- 时间轴的格子 -->
          <grid
            v-for="grid in gridBufferList"
            v-bind:key="grid"
            :frame="grid.frame"
            :width="grid.width"
            :showNumber="grid.showNumber"
          ></grid>
        </div>

        <!-- 时间轴的视频容器 -->
        <div class="video-line" :style="{ width: timescale_width + 'px' }">
          <video-item
            v-for="(item, index) in videoTrackMaterialList"
            :key="item"
            :visionTrackMaterial="item"
            :frames="framesMap.get(index)"
            :index="index"
          ></video-item>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import Store from "@/store";
import { inject, ref, onMounted, computed, watchEffect } from "vue";
import Grid from "@/components/Grid.vue";
import VideoItem from "@/components/VideoItem.vue";
import Mapping from "@/map";
import { TimeLine } from "@/viewmodels";

// 核心数据
const coreData = inject(Store.coreData);

// 视频轨道渲染数据
const videoTrackMaterialList = computed(() =>
  Mapping.getVideoTrackMaterialList(
    coreData.sections[currentSectionIndex.value - 1].sectionTimeline.visionTrack
      .visionTrackMaterials
  )
);

// 帧宽度：决定了时间轴的比例
const frameWidth = inject(Store.frameWidth);

// 时间轴
const timeLine = ref(null);

// timescale's grid
const gridBufferList = ref([]);

/** 依赖注入 start */
// 时间轴容器的宽度
const timeLineContainer_width = inject(Store.timeLineContainer_width);

// 时间轴滚动轴左偏移量
const timeLineOffsetLeft = inject(Store.timeLineOffsetLeft);

// 时间轴宽度：用户能看见的宽度
const timeLine_width = inject(Store.timeLine_width);

// 时间刻度总宽度：包含用户看不见的宽度
const timescale_width = inject(Store.timescale_width);

// 时间刻度左侧占位的宽度
const timescale_placeholder_width = inject(Store.timescale_placeholder_width);

// 当前格子宽度
const gridWidth = inject(Store.gridWidth);

// 格子内帧数
const gridFrame = inject(Store.gridFrame);

// 每组格子内的帧数
const groupGridFrame = inject(Store.groupGridFrame);

// 段落级焦点
const currentSectionIndex = inject(Store.currentSectionIndex);

// 最小帧宽度
const minFrameWidth = inject(Store.minFrameWidth);

// 最大帧宽度
const maxFrameWidth = inject(Store.maxFrameWidth);

// 合适帧宽度
const fitFrameWidth = inject(Store.fitFrameWidth);

// 当前素材最大帧数
const maxFrameOfMaterial = inject(Store.maxFrameOfMaterial);

// 需要加载上来的视频帧
const framesMap = inject(Store.framesMap);

const videoFrameList = inject(Store.videoFrameList);

/** 依赖注入 end */

/** 点击事件 start */
// 点击放大
const clickZoomIn = () => {
  TimeLine.zoomIn(frameWidth, maxFrameWidth);
};

// 点击缩小
const clickZoomOut = () => {
  TimeLine.zoomOut(frameWidth, minFrameWidth);
};

// 点击缩放到合适
const clickZoomFit = () => {
  TimeLine.zoomFit(frameWidth, fitFrameWidth);
};

watchEffect(() => {
  // 渲染 gridBufferList
  Mapping.renderGridBufferList(
    gridBufferList,
    gridWidth.value,
    groupGridFrame.value,
    gridFrame.value,
    timeLineOffsetLeft.value,
    timeLine_width.value
  );
});

// 计算 timeLineOffsetLeft
onMounted(() => {
  if (timeLine.value) {
    timeLine.value.addEventListener("scroll", (event) => {
      if (event.target) {
        if (
          event.target.scrollLeft <=
          timescale_width.value - timeLine_width.value
        ) {
          // doing nothing
          timeLineOffsetLeft.value = event.target.scrollLeft;
        }
      }
    });
  } else {
    console.log("error: timeLine.value is", timeLine.value);
  }
});
</script>

<style lang="scss" scope>
.timeline-container {
  width: 100%;
  height: 288px;
  background: #202020;
  border-top: 1px solid #1a1a1a;
  display: flex;
  flex-direction: column;

  .top-operation-area {
    height: 31px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
      display: flex;
      align-items: center;
    }

    .top-button-left {
      width: 26px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        background: #1b1b1b;
      }
    }

    .top-button-right {
      width: 26px;
      height: 20px;
      display: flex;
      justify-self: flex-end;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        background: #1b1b1b;
      }
    }
  }

  .left-operation-area {
    height: 100%;
  }

  .timeline {
    width: calc(100% - 37px);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: scroll;
    box-shadow: inset 3px -3px 3px rgba(0, 0, 0, 0.1);

    .timescale {
      display: flex;
      flex-direction: row;
    }

    .video-line {
      margin-top: 15px;
      height: 72px;
      display: flex;
      flex-direction: row;
    }
  }
}
</style>